<template>

    <div class="authorize">

      <el-tabs v-model="active" type="card" @tab-click="handleClick">
        <el-tab-pane :label="$t('authorize.menuPermission')" name="0"></el-tab-pane>
        <el-tab-pane :label="$t('authorize.buttonPermission')" name="1"></el-tab-pane>
        <el-tab-pane :label="$t('authorize.listPermission')" name="2"></el-tab-pane>
        <el-tab-pane :label="$t('authorize.formPermission')" name="3"></el-tab-pane>
        <el-tab-pane :label="$t('authorize.dataPermission')" name="4"></el-tab-pane>
        <el-tab-pane :label="$t('authorize.userList')" name="5"></el-tab-pane>
      </el-tabs>
      <!--  <el-steps :active="active" finish-status="success" simple>
        <el-step :title="$t('authorize.menuPermission')"></el-step>
        <el-step :title="$t('authorize.buttonPermission')"></el-step>
        <el-step :title="$t('authorize.listPermission')"></el-step>
        <el-step :title="$t('authorize.formPermission')"></el-step>
        <el-step :title="$t('authorize.dataPermission')"></el-step>
      </el-steps> -->
      <div class="main">
        <el-form ref="dataForm" :model="dataForm" @keyup.enter.native="handleConfirm()">
          <el-form-item>
            <el-tree :data="authorizeTreeData" ref="authorizeTree" v-loading="treeLoading"
              default-expand-all node-key="id" :check-strictly="checkStrictly" check-on-click-node :props="defaultProps"
              :expand-on-click-node="false" @check-change="selectTreeNodeClick">
              <div slot-scope="{ node, data }">
                <i :class="data.icon" />
                <span style="padding-left: 4px;">{{ node.label }}</span>
              </div>
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
    </div>

</template>

<script>
  import {
    getAuthorizeValues,
    getRoleAuthorizeValues,
    updateAuthorizeList
  } from '@/api/permission/authorize'

  export default {
	  // props: {
	  //   role: {
	  //     type: Object,
	  //     default: () => {
	  //       return {};
	  //     },
	  //   },
	  // },
    data() {
      return {
        visible: false,
        treeLoading: false,
        btnLoading: false,
        checkStrictly: true,
        activeName: "0",
        objectId: '',
        dataForm: {
          objectType: '',
          module: [],
          button: [],
          column: [],
          form: [],
          resource: []
        },
        params: {
          type: 'module',
          moduleIds: ''
        },
        title: '',
        active: "0",
        authorizeTreeData: [],
        moduleAuthorizeTree: [],
        buttonAuthorizeTree: [],
        columnAuthorizeTree: [],
        formAuthorizeTree: [],
        resourceAuthorizeTree: [],
        userListAuthorizeTree:[],
        moduleAllData: [],
        buttonAllData: [],
        columnAllData: [],
        formAllData: [],
        resourceAllData: [],
        userListAllData:[],
        moduleIdsTemp: [],
        defaultProps: { // 配置项（必选）
          value: 'id',
          label: 'fullName',
          children: 'children'
        }
      }
    },
    created() {
      // this.init(this.role.id,this.role.fullName,"Role");

    },
    methods: {
      init(id, fullName, type) {
        Object.assign(this.$data, this.$options.data())
        this.visible = true
        this.objectId = id
        this.dataForm.objectType = type
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (type === 'User') {
            this.title = this.$t(`user.userPermission`) + ' - ' + fullName
          } else if (type === 'Position') {
            this.title = this.$t(`position.postPermission`) + '- ' + fullName
          } else if (type === 'Role') {
            this.title = this.$t(`role.rolePermission`) + ' - ' + fullName
          }
          this.getAuthorizeList()
        })
      },
      getAuthorizeList() {

        this.treeLoading = true
        this.authorizeTreeData = []
        console.log(this.active)
        console.log(this.objectId)
        console.log(this.params)

        getRoleAuthorizeValues(this.objectId, this.params).then(res => {

          switch (this.active) {
            case "0":
              console.log("获取菜单")
              this.moduleAuthorizeTree = res.data.list
              this.moduleAllData = res.data.all
              this.authorizeTreeData = this.moduleAuthorizeTree
              const moduleIds = [...this.moduleIdsTemp, ...res.data.ids]
              this.dataForm.module = [...new Set(moduleIds)]
              this.moduleIdsTemp = this.dataForm.module
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.module)

              break
            case "1":
              console.log("获取按钮")
              this.buttonAuthorizeTree = res.data.list
              this.buttonAllData = res.data.all
              this.authorizeTreeData = this.buttonAuthorizeTree

              this.dataForm.button = [...this.dataForm.button, ...res.data.ids, ...this.moduleIdsTemp]
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.button)
              break
            case "2":
              console.log("获取列表")
              this.columnAuthorizeTree = res.data.list
              this.columnAllData = res.data.all
              this.authorizeTreeData = this.columnAuthorizeTree
              this.dataForm.column = [...this.dataForm.column, ...res.data.ids, ...this.moduleIdsTemp]
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.column)
              break
            case "3":
              console.log("获取表单")
              this.formAuthorizeTree = res.data.list
              this.formAllData = res.data.all
              this.authorizeTreeData = this.formAuthorizeTree
              this.dataForm.form = [...this.dataForm.form, ...res.data.ids, ...this.moduleIdsTemp]
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.form)
              break
            case "4":
              console.log("获取数据")
              this.resourceAuthorizeTree = res.data.list
              this.resourceAllData = res.data.all
              this.authorizeTreeData = this.resourceAuthorizeTree
              this.dataForm.resource = [...this.dataForm.resource, ...res.data.ids, ...this.moduleIdsTemp]
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.resource)
              break
            case "5":
              console.log("获取角色下人员列表信息")
              this.userListAuthorizeTree = res.data.list
              this.userListAllData = res.data.all
              this.authorizeTreeData = this.userListAuthorizeTree
              this.dataForm.resource = [...this.dataForm.resource, ...res.data.ids, ...this.moduleIdsTemp]
              this.$refs.authorizeTree.setCheckedKeys(this.dataForm.resource)
              break
          }

          this.checkStrictly = false
          this.treeLoading = false
        }).catch(() => {
          this.treeLoading = false
        })
      },
      goBack() {
        this.$emit('close')
      },
      // 全选/全不选
      handleCheck(val) {
        if (val === 'checkAll') {
          switch (this.active) {
            case "0":
              this.$refs.authorizeTree.setCheckedKeys(this.moduleAllData)
              break
            case "1":
              this.$refs.authorizeTree.setCheckedKeys(this.buttonAllData)
              break
            case "2":
              this.$refs.authorizeTree.setCheckedKeys(this.columnAllData)
              break
            case "3":
              this.$refs.authorizeTree.setCheckedKeys(this.formAllData)
              break
            case "4":
              this.$refs.authorizeTree.setCheckedKeys(this.resourceAllData)
              break
          }
        }
        if (val === 'cancelCheckAll') {
          this.$refs.authorizeTree.setCheckedKeys([])
        }
      },
      // 折叠 展开
      setAllExpand(state) {
        let result
        if (state === 'open') {
          result = true
        }
        if (state === 'close') {
          result = false
        }
        const nodes = this.$refs.authorizeTree.store.nodesMap
        for (let i in nodes) {
          nodes[i].expanded = result
        }
      },
      // 上一步
      handlePrevStep() {
        this.active -= 1
        this.handelInitData()
      },
      // 下一步
      handleNextStep() {
        if (this.active++ > 4) this.active = 0
        this.handelInitData()
      },
      // 切换主题标签
      handleClick(tab, event) {
        this.handelInitData();
      },
      handelInitData() {
        this.checkStrictly = true
        this.treeLoading = true
        switch (this.active) {
          case "0":
            this.params.type = 'module'
            break
          case "1":
            this.params.type = 'button'
            this.params.moduleIds = (this.moduleIdsTemp).toString()
            break
          case "2":
            this.params.type = 'column'
            this.params.moduleIds = (this.moduleIdsTemp).toString()
            break
          case "3":
            this.params.type = 'form'
            this.params.moduleIds = (this.moduleIdsTemp).toString()
            break
          case "4":
            this.params.type = 'resource'
            this.params.moduleIds = (this.moduleIdsTemp).toString()
            break
          case "5":
            this.params.type = 'userList'
            this.params.moduleIds = (this.moduleIdsTemp).toString()
            break
        }
        this.getAuthorizeList()
      },
      // 设置数据
      selectTreeNodeClick() {
        const parentIds = this.$refs.authorizeTree.getHalfCheckedKeys()
        const childrenIds = this.$refs.authorizeTree.getCheckedKeys()
        const newIds = [...parentIds, ...childrenIds]
        const dataIds = [...new Set(newIds)]
        switch (this.active) {
          case "0":
            this.dataForm.module = dataIds
            this.moduleIdsTemp = this.dataForm.module
            break
          case "1":
            this.dataForm.button = dataIds
            break
          case "2":
            this.dataForm.column = dataIds
            break
          case "3":
            this.dataForm.form = dataIds
            break
          case "4":
            this.dataForm.resource = dataIds
            break
        }

      },
      handleConfirm() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.btnLoading = true

            updateAuthorizeList(this.objectId, this.dataForm).then(res => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.btnLoading = false
                  this.$emit('close', true)
                }
              })
            }).catch(() => {
              this.btnLoading = false
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .authorize {
    height: 100%;
    overflow-y: auto;
    >>> .el-tabs__nav-scroll {
      padding-top: 0 !important;
    }
    >>> .el-tabs__content {
      overflow: auto;
      overflow-x: hidden;
      .el-tab-pane {
        height: auto !important;
      }
      common-el-tree {
        padding: 0;
      }
    }
  }
  .authorize-bd {
    common-page-header {
      border-bottom: none;
    }

    .el-steps {
      border-radius: 0;
    }
  }

  .main {
    padding: 20px;
  }
</style>
